<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>电梯导航</title>
    <style>
        body,
        h2 {
            margin: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        ul {
            height: 180px;
            width: 60px;
            text-align: center;
            background-color: aqua;
            list-style: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        a {
            text-decoration: none;
            color: black;
        }

        a:hover {
            color: red;
        }

        .content {
            width: 1000px;
            margin: 0 auto;
            background-color: antiquewhite;
        }

        .header {
            height: 80px;
            background-color: gray;
        }

        .floor {
            height: 400px;
            background-color: azure;
        }

        .floor2 {
            background-color: lightcoral;
        }

        .floor4 {
            background-color: skyblue;
        }

        .elevator {
            position: fixed;
            top: 140px;
            right: 160px;
            display: none;
        }

        .active {
            color: red
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="header">
            <h2>头部</h2>
        </div>
        <div class="floor floor1">
            <h2>楼层1</h2>
        </div>
        <hr>
        <div class="floor floor2">
            <h2>楼层2</h2>
        </div>
        <hr>
        <div class="floor floor3">
            <h2>楼层3</h2>
        </div>
        <hr>
        <div class="floor floor4">
            <h2>楼层4</h2>
        </div>
        <hr>
        <div class="floor floor5">
            <h2>楼层5</h2>
        </div>
        <div class="elevator">
            <ul>
                <li><a href="javascript:;" data-id="0">一楼</a></li>
                <li><a href="javascript:;" data-id="1">二楼</a></li>
                <li><a href="javascript:;" data-id="2">三楼</a></li>
                <li><a href="javascript:;" data-id="3">四楼</a></li>
                <li><a href="javascript:;" data-id="4">五楼</a></li>
                <li><a href="#" data-id="5">顶部</a></li>
            </ul>
        </div>
    </div>
    <script>
        const ul = document.querySelector('ul')
        const elevator = document.querySelector('.elevator')
        const f1 = document.querySelector('.floor1').offsetTop
        // 页面滚动显示隐藏电梯导航，链接变为选中状态
        window.addEventListener('scroll', function () {
            const n = document.documentElement.scrollTop
            // 当页面滚动大于一楼的offsetTop时显示，否则隐藏
            elevator.style.display = n >= f1 ? 'block' : 'none'
            const active = document.querySelector('.active')
            if (active) {
                active.classList.remove('active')
            }
            const floor1=document.querySelector('.floor1').offsetTop
            const floor2=document.querySelector('.floor2').offsetTop
            const floor3=document.querySelector('.floor3').offsetTop
            const floor4=document.querySelector('.floor4').offsetTop
            const floor5=document.querySelector('.floor5').offsetTop
            if(n>=floor1&&n<floor2){
                document.querySelector("[data-id='0']").classList.add('active')
            }
            else if(n>=floor2&&n<floor3){
                document.querySelector("li:nth-child(2) a").classList.add('active')
            }
            else if(n>=floor3&&n<floor4){
                document.querySelector("[data-id='2']").classList.add('active')
            }
            else if(n>=floor4&&n<floor5){
                document.querySelector("[data-id='3']").classList.add('active')
            }else if(n>=floor5){
                document.querySelector("[data-id='4']").classList.add('active')
            }
        })
        ul.addEventListener('click', function (e) {
            if (e.target.tagName === 'A' && e.target.dataset.id !== '5') {
                document.documentElement.scrollTop = document.querySelector(`.floor${+e.target.dataset.id + 1}`).offsetTop
            }
        })
    </script>

</body>

</html>